<template>
  <el-table
    border
    v-loading="loading"
    :header-cell-style="setTableHeader"
    ref="multipleTable"
    :data="tableInfo"
    tooltip-effect="dark"
    style="width: 100%;">
    <el-table-column
      v-for="(item,index) in tableHeader"
      v-if="item.template!=='hide'"
      :key="index"
      :label="item.label"
      :width="item.width">
      <template slot-scope="scope">
        <!-- 时间 -->
        <slot :name="item.prop" :obj="scope" v-if="item.template==='time'">{{formatTime(scope.row[item.prop])}}</slot>
        <!-- 状态 -->
        <slot :name="item.prop" :obj="scope" v-else-if="item.template==='status'">
          <span :style="'color:'+(scope.row[item.prop]===1?'#67c430':'#e60000')">{{scope.row[item.prop]===1?'可用':'禁用'}}</span>
        </slot>
        <!-- 图片 -->
        <slot :name="item.prop" :obj="scope" v-else-if="item.template==='image'">
          <img :src="scope.row[item.prop]" v-if="scope.row[item.prop]" class="icon" @click="item.operation.clickFun(scope.row[item.prop])">
          <span v-else>——</span>
        </slot>
        <!-- 操作 -->
        <div class="table_btn" v-else-if="item.template==='operate'">
          <span
            v-for="(btn,bIndex) in item.operation"
            v-if="btn.limit"
            :key="bIndex"
            class="change_info"
            :class="{'delete_btn':btn.type==='delete'}"
            @click="btn.clickFun(scope.row.id)">
            {{btn.name}}
          </span>
        </div>
        <!-- 其他 -->
        <slot :name="item.prop" :obj="scope" v-else>{{scope.row[item.prop]?scope.row[item.prop]:'——'}}</slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import commons from "../../utils/common";

export default {

  props:{
    // 加载
    loading:{
      type:Boolean,
      default: function () {
        return false
      }
    },
    // 表数据
    tableInfo:{
      type:Array,
      default: function () {
        return []
      }
    },
    // 表头
    tableHeader:{
      type:Array,
      default: function () {
        return []
      }
    }
  },
  data(){
    return {

    }
  },
  mounted() {

  },
  methods:{
    // 设置table标题居中
    setTableHeader({row, column, rowIndex, columnIndex}) {
      return 'background:#F0F2F5;color:#111;padding:10px 0;font-size:14px;font-weight:600'
    },
    filterHandler (filters) {
      this.$emit('filter-events', filters)
    },
    formatTime(time){
      return commons.formatTime(time)
    }
  },
  watch:{
    tableInfo(newV,oldV){
      if (newV){
        this.tableInfo = newV;
      }
    }
  }
}
</script>

<style scoped>

</style>
